<script setup lang='ts'>
import { useRenderIcon } from '@/components/ReIcon/src/hooks';
import { ElForm, ElUpload, UploadFile, type FormItemRule } from 'element-plus';
import { reactive, ref, unref } from 'vue';

const disabled = ref(false)
const dialogVisible = ref(false)
const dialogImageUrl = ref('')
const uploadref = ref<typeof ElUpload>()
const handleRemove = (file: UploadFile) => {

  unref(uploadref).clearFiles()
  value.value = void 0;

}

const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!
  dialogVisible.value = true
}

const handleDownload = (file: UploadFile) => {
  console.log(file)
}
const value = ref<UploadFile>()
function handleFileChange(params: UploadFile) {
  console.log(params);

  value.value = params
}
const formModel = reactive({
  invoiceURL: '',
  accountName: '',
  receivingAccount: '',
  bankOfAccountOpening: ''
})
const formRule = reactive<Partial<Record<keyof typeof formModel, FormItemRule[]>>>({
  invoiceURL: [
    { required: true, message: '请上传发票', trigger: 'blur' },
    { type: 'url', message: '请输入正确的链接地址', trigger: ['blur', 'change'] }
  ],
  accountName: [],
  receivingAccount: [
    { required: true, message: '请输入收款账户', trigger: 'blur' },
    { type: 'string', pattern: /^\d*$/, message: '请输入正确的收款账户', trigger: 'blur' },
  ],
  bankOfAccountOpening: [
    { required: true, type: 'string', message: '请输入收款账户', trigger: 'blur' },
  ]
})
</script>

<template>
  <div>

    <el-dialog v-model="dialogVisible">
      <div class="flex justify-center">
        <img class="max-w-full h-96 object-scale-down" :src="dialogImageUrl" alt="Preview Image" />
      </div>
    </el-dialog>
    <ElCard class="p-4 rounded">
      <template #header>
        <el-steps class="mb-4 " :space="200" :active="0" simple>
          <el-step title="发票上传" :icon="useRenderIcon('ep:upload-filled')" />
          <el-step title="审核" :icon="useRenderIcon('line-md:check-list-3-filled')" />
          <el-step title="提现" :icon="useRenderIcon('game-icons:pay-money')" />
        </el-steps>
      </template>
      <ElForm label-position="top" :rules="formRule" :model="formModel">
        <el-descriptions border title="开票信息,请确保正确">
          <el-descriptions-item label="公司名称">麦当劳</el-descriptions-item>
          <el-descriptions-item label="纳税人识别号">91310000607295837G</el-descriptions-item>
        </el-descriptions>
        <ElRow class="mt-24">
          <ElCol :span="12">
            <el-form-item label="上传电子发票" prop="invoiceURL">
              <el-upload action="#" ref="uploadref" list-type="picture" @change="handleFileChange" :limit="1"
                :auto-upload="false">
                <template #trigger v-if="!value">
                  <div
                    class="h-60 w-96 text-5xl flex items-center justify-center rounded-md  border-2 border-gray-400 border-dashed hover:border-blue-500">
                    <IconifyIconOnline icon="icon-park-outline:id-card" />
                  </div>
                </template>
                <template #file="{ file }">
                  <img class="max-w-lg h-60" :src="file.url" alt="" />
                  <div
                    class="absolute top-0 bottom-0 right-0 left-0 flex justify-center gap-8 hover:bg-zinc-400 hover:bg-opacity-30 items-center hover:text-white ">
                    <span class="text-xl  cursor-pointer" @click="handlePictureCardPreview(file)">
                      <IconifyIconOnline icon="ep:zoom-in" />
                    </span>
                    <span v-if="!disabled" class="text-xl  cursor-pointer" @click="handleDownload(file)">
                      <IconifyIconOnline icon="ep:download" />
                    </span>
                    <span v-if="!disabled" class="text-xl cursor-pointer" @click="handleRemove(file)">
                      <IconifyIconOnline icon="ep:delete" />
                    </span>
                  </div>
                </template>
              </el-upload>
            </el-form-item>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem prop="accountName">
              <template #label>
                <div class="flex justify-between items-end">
                  <span>账户名称</span>
                  <span class="text-xs text-gray-400 ">发票上传后自动识别</span>
                </div>
              </template>
              <ElInput v-model="formModel.accountName" placeholder="发票上传后自动识别" disabled />
            </ElFormItem>
            <ElFormItem label="收款账户" prop="receivingAccount">
              <ElInput placeholder="xxxxxxxxxxxxxx" v-model="formModel.receivingAccount" :disabled="!value" />
            </ElFormItem>
            <ElFormItem label="开户行" prop="bankOfAccountOpening">
              <ElInput placeholder="格式：XX银行XX分行XX支行" v-model="formModel.bankOfAccountOpening" :disabled="!value" />
            </ElFormItem>
            <ElButton :disabled="!value" class="w-full mt-4" type="primary">提交</ElButton>
          </ElCol>
        </ElRow>
      </ElForm>
      <div class="text-center text-gray-500 mt-8">
        <div class="text-sm">上传时间: 2024/6/13 14:36</div>
        <div class="mt-2"><span>审核状态:</span> <span class="text-orange-300 text-base">审核中</span><span
            class="text-green-500 text-base">审核已通过</span></div>
      </div>
    </ElCard>
  </div>
</template>

<style lang='scss' scoped></style>
